<template>
    <div>
      <!-- vue 过度 或动画 -->
      <!-- vue的过度有2中方式  1：css过度  2：js过度 -->
      <button v-on:click="show = !show">
        Toggle
      </button>
      <div class="ab">
        <!-- <transition name="fade">
          <p v-show="show">i am show</p>
        </transition> -->
        <!-- <transition name="my-trans">
          <p v-show="show">i am show</p>
        </transition> -->
        <!-- 动态显示组件 -->
        <transition name="fade">
          <div :is="currentView"></div>
        </transition>
      </div>
    </div>
</template>
<script>
import ComA from './components/a'
import ComB from './components/b'
export default {
  components: {
    ComA,
    ComB
  },
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
 /* 通过cs实现过度 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to
{
  opacity: 0;
}

.my-trans-enter-active, .my-trans-enter-active{
  transition: all .5s ease-out;
}
.my-trans-enter {
  transform: translateY(-500px);
  opacity: -0;
}
.my-trans-leave-to {
  transform: translateY(500px);
  opacity: 0;
}
</style>
